<template>
	<view class="u-demo-block">
		<view
			class="u-demo-block__content"
			style="margin-top: 15px;"
		>
			<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
			<!-- #ifndef APP-NVUE -->
			<u-input v-model="value" placeholder="时间区间">
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			<u--input v-model="value" placeholder="时间区间">
			<!-- #endif -->
				<template slot="suffix">
					<u-code
						ref="uCode"
						@change="codeChange"
						seconds="20"
						changeText="X秒重新获取哈哈哈"
					></u-code>
					<u-button
						@tap="getCode"
						:text="tips"
						type="success"
						size="mini"
					></u-button>
				</template>
			<!-- #ifndef APP-NVUE -->
			</u-input>
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			</u--input>
			<!-- #endif -->
		</view>
		<view class="footer">
			<u-button type="success" text="近一个月" @click="handleSaoma('lastOneMonth')"></u-button>
			<u-button type="success" text="近三个月" @click="handleSaoma('lastThreeMonth')"></u-button>
			<u-button type="success" text="近六个月" @click="handleSaoma('lastHalfYear')"></u-button>
		</view>
	</view>
</template>

<script>
	import {getDate} from './times.js'
  export default {
    data() {
      return {
        tips: '搜索',
        value: ''
      }
    },
    watch: {
      value(newValue, oldValue) {
        // console.log('v-model', newValue);
      }
    },
    methods: {
      codeChange(text) {
        // this.tips = text;
      },
      getCode() {
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在搜索'
          })
          setTimeout(() => {
            uni.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            uni.$u.toast('已发送');
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();
          }, 2000);
        } else {
          uni.$u.toast('倒计时结束后再搜索');
        }
      },
      change(e) {
        console.log('change', e);
      },
	  handleSaoma(data){
		let times = getDate(data)
		// {startTime: "2024-02-25 ", endTime: "2024-03-25 "}
		this.value = times.startTime+'~'+times.endTime
	  }
    }
  }
</script>

<style lang="scss">
	.u-demo-block{
		padding:20rpx
	}
	.footer{
		padding-top: 20rpx;
		display:flex;
		justify-content: space-around;
		align-items: baseline;
	}
</style>

<style>
	.u-button{
		width: 25% !important;
	}
	.u-button--mini{
		height: 35px !important;
	}
	.u-button__text{
		font-size: 26rpx !important;
	}
</style>